<template>
  <div>
    <div class="content"></div>
    <div class="list">
      <ul>
        <li v-for="(item, index) in bd" :key="index" @click.stop="tiao(item.id)">
          <img
            :src="basurl+item.url"
            alt="图片"
          />
          <svg t="1644837428704" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27738" width="32" height="32"><path d="M1024 921.6l-170.66496-102.4-170.67008 102.4L512 819.2l-170.66496 102.4-170.67008-102.4L0 921.6V0h1024z" p-id="27739">3</path></svg>
          <div class="box1">
              <span class="index">{{index+1}}</span>
            <p>{{item.name}}</p>
            <p>{{item.classify}}/{{item.year}}/{{item.director}}</p>
            <p class="text">
             {{item.plot}}
            </p>
          </div>
          <div class="box2">
              <svg t="1644840282887" class="icons" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2082" width="32" height="32"><path d="M710.287 320.707c-87.785 26.446-103.857 101.388-98.198 148.99-62.617-77.737-60.05-167.163-60.05-295.997C351.224 253.674 397.88 484.262 391.9 554.283c-50.513-43.664-60.055-147.987-60.055-147.987-53.328 28.965-80.076 106.364-80.076 169.138 0 151.81 116.513 274.867 260.23 274.867 143.714 0 260.23-123.059 260.23-274.867 0-90.22-62.713-131.85-61.957-254.727h0.015m0 0" p-id="2083"></path></svg>
            <span>{{item.hot}}</span>
            <p>实时热度</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getbd } from "@/api/index"
export default {
  data(){
    return{
      bd:[],
      basurl: " http://127.0.0.1:7001",

    }
  },
  created(){
    this.getdata()
  },
  methods:{
    getdata(){
      getbd().then(res =>{
        this.bd = res.data
        console.log(this.bd);
      })
    },
    tiao(id){
      sessionStorage.setItem("id",id);
      this.$router.push("/details");
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  background: url(../assets/22.jpg);
  width: 100%;
  height: 300px;
  position: relative;
  &::after {
    position: absolute;
    content: "排行榜单";
    color: #fff;
    font-size: 40px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.list {
  width: 1200px;
  margin: 20px auto;
  ul {
    list-style: none;
    li {
        position: relative;
        cursor: pointer;
        .icon{
            position: absolute;
            fill: #f42c5e;
        }
        .index{
            position: absolute;
            left: 2%;
            top:9%;
            font-weight: 700;
            color: #fff;
        }
      &:hover {
        background: #e4e7ed;
      }
      display: flex;
      padding: 15px;
      justify-content: left;
      img {
        width: 140px;
        height: 187px;
        object-fit: cover;
      }
      .box1 {
        margin-left: 10px;
        width: 900px;
        p {
          margin-top: 20px;
          &:nth-child(1) {
            color: #303133;
          }
          &:nth-child(2) {
            color: #606266;
          }
        }
        .text{            
            color: #606266;
            width: 750px;
            max-height: 48px;
            line-height: 24px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
      }
      .box2 {
        margin-top: 70px;
        position: relative;
        .icons{
            position: absolute;
            left: -16px;
            top: -2px;
            &:nth-child(1){
                fill: #f42c5e;
            }
        }
        span {
          margin-left: 10px;
          font-size: 20px;
          color: #18191e;
        }
        p {
          font-size: 14px;
          margin-left: 7px;
        }
      }
    }
  }
}
</style>